<template>
  <header class="header">
    <div class="container header__inner">
      <RouterLink class="header__brand" :to="{ name: 'home' }">
        <span class="brand__logo">BearingMall</span>
        <span class="brand__slogan">专注工业轴承的智能供应链平台</span>
      </RouterLink>
      <nav class="header__nav">
        <RouterLink
          v-for="item in navItems"
          :key="item.name"
          :to="item.route"
          custom
          v-slot="{ navigate, href }"
        >
          <a
            :href="href"
            class="header__link"
            :class="{
              'is-active': currentName === item.name,
              'is-disabled': !isLoggedIn && item.requiresAuth
            }"
            @click.prevent="handleNavClick(item, navigate)"
          >
            {{ item.label }}
            <span v-if="item.requiresAuth && !isLoggedIn" class="header__badge">
              登录后
            </span>
          </a>
        </RouterLink>
      </nav>
      <div class="header__actions">
        <template v-if="!isLoggedIn">
          <button class="btn btn--ghost" @click="$emit('open-register')">
            注册
          </button>
          <button class="btn btn--primary" @click="$emit('open-login')">
            登录
          </button>
        </template>
        <div v-else class="header__profile">
          <span class="header__avatar">{{ usernameInitial }}</span>
          <div class="header__info">
            <span class="header__welcome">欢迎回来，{{ username }}！</span>
            <button class="btn btn--ghost" @click="$emit('logout')">
              退出登录
            </button>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>

<script setup>
import { computed } from "vue";
import { useRoute } from "vue-router";

const props = defineProps({
  isLoggedIn: { type: Boolean, default: false },
  username: { type: String, default: "访客" }
});

const emit = defineEmits(["open-login", "open-register", "logout"]);

const route = useRoute();

const navItems = [
  { name: "home", label: "商城首页", route: { name: "home" }, requiresAuth: false },
  { name: "cart", label: "购物车", route: { name: "cart" }, requiresAuth: true },
  {
    name: "verification",
    label: "核实记录",
    route: { name: "verification" },
    requiresAuth: true
  },
  { name: "orders", label: "我的订单", route: { name: "orders" }, requiresAuth: true },
  { name: "member", label: "会员中心", route: { name: "member" }, requiresAuth: true }
];

const currentName = computed(() => route.name);

const usernameInitial = computed(() =>
  props.username ? props.username.slice(0, 1).toUpperCase() : "访"
);

const handleNavClick = (item, navigate) => {
  if (item.requiresAuth && !props.isLoggedIn) {
    emit("open-login");
    return;
  }
  navigate();
};
</script>

<style scoped lang="scss">
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gray-200);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  gap: 24px;
}

.header__brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
}

.brand__logo {
  font-size: 20px;
  font-weight: 700;
  color: var(--primary-color);
}

.brand__slogan {
  font-size: 12px;
  color: var(--gray-500);
}

.header__nav {
  display: flex;
  gap: 20px;
  font-size: 14px;
  color: var(--gray-700);
}

.header__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 4px;
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.header__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--primary-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.header__link:hover::after,
.header__link.is-active::after {
  transform: scaleX(1);
}

.header__link.is-disabled {
  color: var(--gray-400);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn {
  border: none;
  border-radius: 999px;
  padding: 8px 18px;
  font-weight: 600;
  transition: all 0.2s ease;

  &--primary {
    background: var(--primary-color);
    color: #fff;

    &:hover {
      background: #0040ad;
    }
  }

  &--ghost {
    background: transparent;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);

    &:hover {
      background: var(--primary-light);
    }
  }
}

.btn--ghost + .btn--primary {
  margin-left: 4px;
}

.header__profile {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary-color);
  font-weight: 700;
}

.header__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}

.header__welcome {
  color: var(--gray-700);
}

.header__badge {
  font-size: 11px;
  color: var(--primary-color);
  background: rgba(0, 82, 217, 0.12);
  border-radius: 999px;
  padding: 2px 6px;
}

@media (max-width: 980px) {
  .header__inner {
    flex-wrap: wrap;
    justify-content: center;
  }

  .header__nav {
    order: 3;
    flex-wrap: wrap;
    justify-content: center;
  }
}
</style>
